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Ahora te encuentras en el inicio de la documentacion que trata sobre el lenguaje Web 
Javascript. Durante la lectura aprenderas a hacer dinamicas tus paginas web y hacerlas mucho 
mas atractivas para los visitantes. 

Esta documentacion cubrira muchos temas, desde lo basico. Aprenderas como hacer 
animaciones, aplicaciones complejas y utilizar este lenguaje junto con HTML5, la nueva version 
del famoso W3C. 

Esta documentacion discutira principalmente el uso de JavaScript en un entorno de navegador 
Web, por lo que es esencial que sepas codificacion HTML y CSS. Conocer PHP puede ser una 
ventaja. 


Parte 1: Conceptos basicos de Javascript 


Como cualquier otro lenguaje de programacion, JavaScript tiene algunas caracteristicas 
especiales: sintaxis, modelo de objetos, etc. Claramente, cualquier cosa que diferencia 
un lenguaje de otro. Ademas, descubriras rapidamente que JavaScript es un lenguaje 
relativamente especial en su acercamiento a las cosas. Esta parte es esencial para 
cualquier principiante de programacion e incluso para aquellos que ya conocen un lenguaje 
de programacion debido a que las diferencias con otros lenguajes de programacion son 
numerosas. 

Introduccion a JavaScript 

Antes de entrar directamente en el nucleo de la cuestion, este capitulo te ensenara lo que 
Javascript, puede hacer, cuando se puede o se debe utilizar y como ha evolucionado desde su 
creacion en 1995. 

Tambien vamos a discutir algunos conceptos basicos tales como las definiciones exactas de 
ciertos terminos. 

<i,Que es JavaScript? 
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JavaScript es un lenguaje de programacion de scripts (secuencia de comandos) orientado 
a objetos. Esta descripcion es un poco rudimentaria, hay varios elementos que vamos a 
diseccionar. 

- Un lenguaje de programacion 

En primer lugar, un lenguaje de programacion es un lenguaje que permite a los 
desarrolladores escribir codigo fuente que sera analizado por un ordenador. 

Un desarrollador o programador es una persona que desarrolla programas. Puede ser un 
profesional (un ingeniero, programador informatico o analista) o un aficionado. 

El codigo fuente esta escrito por el desarrollador. Este es un conjunto de acciones, llamadas 
instrucciones, lo que permitira dar ordenes al ordenador para operar el programa. El codigo 
fuente es algo oculto, como un motor en un automovil esta oculto, pero esta ahi, y es quien 
asegura que el coche puede ser conducido. En el caso de un programa, es lo mismo, el codigo 
fuente rige el funcionamiento del programa. 

Dependiendo del codigo fuente, el ordenador realiza varias acciones, como abrir un menu, 
iniciar una aplicacion, efectuar busquedas, en fin, todo lo que el equipo es capaz de hacer. 

Hay una gran cantidad de lenguajes de programacion, la mayoria se encuentran en esta paaina 
de la Wikipedia. 


- Scripts de programacion 

JavaScript te permite programar scripts. Como se menciono anteriormente, un lenguaje de 
programacion es utilizado para escribir codigo fuente a ser analizada por un ordenador. Hay 
tres formas de usar el codigo fuente: 

Lenguaje compilado como: El codigo fuente se da a un programa llamado compilador que lee el 
codigo fuente y lo convierte en un lenguaje que el equipo sera capaz de interpretar: el lenguaje 
binario, es de 0 y 1. Lenguajes como C o C ++ son lenguajes compilados muy conocidos. 

Lenguaje precompilado: aqui, el codigo fuente se compila en parte, por lo general en un codigo 
mas facil de leer para el ordenador, pero que todavia no es binario. Este codigo intermedio es 
para ser leido por lo que se llama una “Maquina Virtual", que ejecutara el codigo. Lenguajes 
como C # o Java se llaman precompilados. 

Lenguaje interpretado: en este caso, no hay compilacion. El codigo fuente se mantiene sin 
cambios, y si desea ejecutar este codigo, debemos proporcionar un interprete que va a leer y 
realizar las acciones solicitadas. 
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Los scripts son en su mayoria interpretados. Y cuando decimos que JavaScript es un lenguaje 
interpretado, lo que significa que es un lenguaje interpretado. Por tanto, es necesario contar 
con un interprete para ejecutar codigo Javascript, y el interprete que se utiliza una frecuencia: 
se incluye en tu navegador de internet. 

Cada navegador tiene un interprete Javascript, que varia en funcion del navegador. Si esta 
utilizando Internet Explorer, el interprete es llamado JScript (version 9 interprete llamado 
Chakra), en Mozilla Firefox se llama SpiderMonkey y el motor V8 es el de Google Chrome. 

- Lenguaje orientado a objetos 

Queda una specto a analizar: orientado a objetos. Este concepto es bastante complicado de 
configurar ahora y se profundizara sobre todo despues de la parte 2. Sin embargo, un lenguaje 
de programacion orientado a objetos es un lenguaje que contiene elementos, llamados 
objetos y los objetos diferentes tienen caracteristicas especificas y formas de uso diferente. 
El lenguaje proporciona objetos basicos, como imagenes, fechas, cadenas de caracteres... 
Tambien es posible crear tus propios objetos para hacer la vida mas facil y obtener un codigo 
fuente mas claro (facil de leer) y una forma de programar mucho mas intuitivo (logica). 

Es muy probable que no entiendas este paso si nunca ha realizado programacion, pero no: 
comprenderas muy pronto como funciona todo. 

JavaScript, el lenguaje de scripts 

Javascript actualmente es principalmente utilizado en internet, junto con las paginas web 
(HTML o XHTML). Javascript esta directamente incluido en la pagina web (o en un archivo 
externo) y mejora una pagina HTML, ahadiendo interaccion del usuario, animacion, ayudas a la 
navegacion, tales como: 

Mostrar / ocultar el texto; 

Deslizamiento de imagenes; 

Crear presentaciones de diapositivas; 

Crear burbujas de informacion. 

De JavaScript se dice que es un lenguaje del lado del cliente, es decir que los scripts son 
ejecutados por el navegador del usuario (cliente). Esto difiere de los llamados lenguajes 
de script del lado del servidor que son ejecutadas por el servidor web. Este es el caso de 
lenguajes como PHP. 

Esto es importante porque el proposito de los scripts del lado del cliente y del lado del servidor 
no es el mismo. Un script del lado del servidor se encargara de "crear" la pagina web que se 
envia al navegador. Este entonces mostrara la pagina a continuacion, ejecutara secuencias de 
comandos del lado del cliente como JavaScript. Un patron que se repite en esta operacion: 
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Visiteur Client Serveur 



f @t execute It Javascript 

Javascript no es la Web 

Si Javascript esta disenado para ser usado en conjuncion con HTML, el lenguaje ha 
evolucionado desde entonces hacia otros destinos. Javascript es regularmente utilizado para 
hacer extensiones para diferentes programas, como los scripts codificados en Lua o Python. 

JavaScript tambien se puede utilizar para construir aplicaciones. Mozilla Firefox es el ejemplo 
mas famoso: la interfaz del navegador se crea con una especie de HTML llamado XUL y 
JavaScript que se utiliza para animar la interfaz. Otros programas tambien estan basados 
en esta tecnologia, como por ejemplo de TomTom HOME que se utiliza para administrar tu 
navegador GPS TomTom a traves de tu PC. 

Breve historia del lenguaje 

En 1995, Brendan Eich trabajaba en Netscape Communications Corporation, la compahia que 
publico el famoso Netscape Navigator, entonces principal competidor de Internet Explorer. 
Brendan desarrollo Live Script un lenguaje de script que se basa en el lenguaje Java, y que 
estaba destinado a ser instalado en los servidores desarrollados por Netscape. Netscape inicio 
el desarrollo de una version del cliente LiveScript, que paso a llamarse JavaScript, en 
homenaje al lenguaje Java creado por Sun Microsystems. 

En efecto, en ese momento, el lenguaje Java era cada vez mas popular, y Brendan Eich, el 
padre de Javascript, al llamarlo JavaScript en lugar de LiveScript era una forma de publicidad 
de Java y JavaScript en si. Atencion, al final, estos dos lenguajes son radicalmente diferentes, 
no vayas a confundir Java y JavaScript, pues operan de forma diferente. 

Javascript fue lanzado en diciembre de 1995 y estaba integrado en Netscape Navigator 2. El 
lenguaje fue tan exitoso, por lo que Microsoft desarrollo una version similar llamada JScript, que 
se instalaba en Internet Explorer 3, en 1996. Netscape decidio enviar a su version de Javascript 
a ECMA International ( European Computer Manufacturers Association, la Asociacion Europea 
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de Normalizacion de hoy los sistemas de informacion y comunicacion) para que el lenguaje 
fuera normalizado, es decir para que se creara una referenda del lenguaje y que asi puediera 
ser utilizado por otras personas y embebidos en otro software. ECMA International estandarizo 
el lenguaje con el nombre de ECMAScript. Desde entonces, las versiones de ECMAScript 
han evolucionado. La version mas conocida es utilizada en todo el mundo, es la version 
ECMAScript 3, publicado en diciembre de 1999. 

ECMAScript y sus derivados 

ECMAScript es la linea de base en el flujo de implementaciones de referenda. Obviamente, se 
puede citar a Javascript, que se implementa en la mayoria de los navegadores, pero tambien: 

JScript, que esta embebido en la aplicacion Internet Explorer. Tambien es el nombre del 
interprete de Internet Explorer; 

JScript.NET, que se inserta en el marco de Microsoft NET.; 

ActionScript, que es la implementacion realizada por Adobe en Flash; 

EX4 que es el desarrollo de gestion de ECMAcript de XML en el seno del interprete 
JavaScript 

SpiderMonkey.de Firefox. 

Versiones de Javascript 

Las versiones de Javascript se basan en los de la ECMAScript (que abreviaremos como ES). 
Por lo tanto, se encuentran: 

ES 1 y ES 1, que son los inicios de Javascript; 

ES 3 (publicada en diciembre de 1999), que es funcional en todos los navegadores 
(excepto las versiones anteriores de Internet Explorer); 

ES 4, que fue abandonada debido a los grandes cambios que no fueron apreciados; 

ES 5 (publicada en diciembre de 2009), que es la version mas reciente liberada; 

ES 6, que se encuentra actualmente en fase de diseno. 

Esta documentacion cubrira todas las versiones actualizadas. 

Un logotipo desconocido 

No hay imagenes oficiales para representar Javascript. Sin embargo, este logotipo se utiliza 
cada vez mas por la comunidad, especialmente desde su introduccion en EE.UU. en JSConf 
EU. Se puede encontrar en esta direccion en diferentes formatos. 

Resumen 

• JavaScript es un lenguaje de programacion interpretado, es decir, que necesita un 
interprete para ser ejecutado. 
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JavaScript se utiliza principalmente en paginas web. 

Al igual que HTML, JavaScript es ejecutado por el navegador del usuario: se llama un 
de cliente, en comparacion con el lado del servidor cuando el codigo es ejecutado por el 
servidor. 

Javascript esta normalizado por ECMA International como el nombre ECMAScript 
Language Reference. 

Hay otros lenguajes derivadas del ECMAScript como ActionScript, EX4 o JScript.NET. 

La ultima version del estandar esta basado en ECMAScript 5, lanzado en 2009. 
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(gfimeros pasos en Javascript 

Como se menciono anteriormente, JavaScript es un lenguaje utilizado principalmente con el 
lenguaje HTML, en este capitulo se aprende como integrar este lenguaje en tus paginas web, 
descubrirsu sintaxis basica y mostrar un mensaje en la pantalla del usuario. 

Tambien se encuentran al final de este capitulo algunos enlaces que pueden probablemente 
ser utiles durante la reproduccion de esta documentacion. 

En cuanto al editor de texto a usar (en el que se escribe el codigo Javascript) es muy probable 
que valga el que se ha empleado para el codigo HTML. 

Muestra un cuadro de dialogo 

Hola Mundo! No se deroga la regia tradicional de que todos los tutoriales de programacion 
comenzaran mostrando el texto "Hello World!'', ("jHola Mundo!" en espanol) al usuario. A 
continuacion se muestra un programa HTML simple que contiene la instruccion Javascript, 
situada dentro de un elemento <script>: 

Codigo: HTML - Hola Mundo! 

<!DOCTYPE html> 

<html> 

<head> 

<title>Hello World !</title> 

</head> 

<body> 

<script> 

alert('Hello world!'); 

</script> 

</body> 

</html> 

Apareciendo al ejecutarlo la siguiente caja de dialogo: 
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Lo nuevo 

En el codigo HTML indicado anteriormente, vemos algunas nuevas caracteristicas. En primer 
lugar, un elemento <script> esta presente: es el quien tiene el codigo javascript de la siguiente 
manera: 

Codigo: JavaScript 


alert ('Hello world'); 

Es una declaracion, es decir, una orden, o mas bien una accion que el equipo tendra que 
hacer. los lenguajes de programacion consisten en una secuencia de instrucciones que, 
colocados de extremo a extremo, permiten obtener un programa o un script completo. En este 
ejemplo, no es una instruccion: se llama a la funcion alerta. 

El cuadro de dialogo de alert () 

alert () es una declaracion simple, llamada funcion, que muestra un cuadro de dialogo que 
contiene un mensaje. este mensaje se coloca entre comillas, entre los parentesis de la function 
alert (). 

Sintaxis de Javascript 

Instruccion 

La sintaxis de Javascript no es complicada. Generalmente, las instrucciones deben estar 
separadas por un punto y coma que se coloca al final de cada instruccion: 

Codigo: JavaScript 

sentencia_1; 
sentencia_2; 
sentencia_3; 
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En realidad, el punto y coma no es necesario si la instruccion siguiente esta en la linea 
posterior como en nuestro ejemplo. Sin embargo, si escriben varias instrucciones en una sola 
linea, como en el siguiente ejemplo, el punto y coma es obligatorio. Si lo virtual punto 

Codigo JavaScript 

sentencia_1; sentencia_2 
sentencia_3 

Compresion de scripts 

Algunas secuencias de comandos estan disponibles en un formato comprimido, es decir, todo 
el codigo se escribe como secuencia, no hay retornos de linea. Esto reduce considerablemente 
el tamano de una secuencia de comandos y sirve para asegurar que la pagina se carga mas 
rapidamente. Existen programas para "comprimir" el codigo Javascript. Pero si has olvidado un 
solo punto y coma el codigo comprimido no va a funcionar porque las instrucciones no estan 
debidamente separadas. Tambien es una de las las razones por las que siempre se pone el 
punto y coma al final de la instruccion. 

Espacios 

Javascript no es sensible a los espacios. Esto signifies que puedes alinear las instrucciones 
que quieras, siempre que no interfiera con la secuencia de comandos. Por ejemplo, esto es 
correcto: 

Codigo JavaScript 

instruccion_1; 

instruccion_1_1; 
instruccion_1_2; 
instruccion_2; instruccion_3; 

Sangria y presentacion 

La sangria en la programacion informatics, es una manera de estructurar el codigo para hacerlo 
mas legible. Las instrucciones son priorizadas en varios niveles y espacios de usos o lenguetas 
para desplazar a la derecha y crear una jerarquia. Un ejemplo de codigo sangrado: 

Codigo: JavaScript 


function interruptor(elemlD) { 

var elem = document.getElementByld(elemlD); 

if (elem.style.display == 'block') { 
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elem.style.display = 'none'; 

} else { 

elem.style.display = 'block'; 

} 

} 

La presentacion de los codigos tambien es importante, es como si estuvieras escribiendo una 
carta: no hay reglas predefinidas para escribir cartas, por lo que tendras que hacer arreglos 
para organizar tu codigo para mostrarlo claro. En el codigo sangrado mostrado anteriormente, 
se puede ver que hay espacios para “airear” todo el codigo y solo hay una declaracion por linea 
(salvo if else, pero ya llegaremos a eso mas adelante). Algunos desarrolladores escriben su 
codigo como este: 

Codigo: JavaScript 

function interruptor(elemlD){ 

var elem=document.getElementByld(elemlD); 
if(elem.style.display=='block'){ 

elem.style.display-none'; 

}else{elem.style.display='block';} 

} 

Comentarios 

Los comentarios son anotaciones realizadas por el desarrollador para explicar el 
funcionamiento de un script, una instruccion o incluso un grupo de instrucciones. Los 
comentarios no interfieren con la ejecucion de un script. 

Hay dos tipos de comentarios: los de fin de linea y los multilinea. 

Comentarios de fin de linea. Se utilizan para comentar una instruccion. Comienza con dos 
barras de division: 

Codigo: JavaScript 

sentencia_1 / / Esta es mi primera instruccion 
sentencia_2; 

//La tercera declaracion es la siguiente: 
sentencia_3; 


El texto colocado en un comentario se ignora cuando se ejecuta un script, lo que significa que 
puedes poner un comentario, incluso en una instruccion (que, obviamente, no se ejecutara): 
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Codigo: JavaScript 

sentencia_1 / / Esta es mi primera instruccion 
sentencia_2; 

//La tercera declaration da problemas, la cancelo temporalmente 
/ / sentencia_3; 


Comentarios multilinea. Este tipo permite saltos de linea. Un comentario multilinea comienza 
con / * y termina con * /: 

Codigo: JavaScript 

/ * Este script consta de tres pasos: 

- Instruccion uno esta haciendo algo 

- Instruccion dos para otra cosa 

- Instruccion tres que pone fin a la secuencia de comandos 
*/ 

sentencia_1; 
sentencia_2; 

sentencia_3 / / Fin del script 

Ten en cuenta que un comentario de varias lineas se pueden mostrar en una sola linea: 

Codigo: JavaScript 

sentencia_1 / * Esta es mi primera instruccion * / 
sentencia_2; 

Funciones 

En el ejemplo de jHola mundol, Se utilizo la funcion alert (). Discutiremos en detalle la 
funciones de trabajo, en los capitulos siguientes, necesitaras saber el resumen de la sintaxis. 

Una funcion consiste en dos partes: su nombre, seguido por un par de parentesis (una apertura 
y un cierre): 

Codigo: JavaScript 

myFunction () / /" function" quiere decir "funcion" en Ingles 
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Entre parentesis se indican los argumentos que tambien se Hainan parametros. Estos contienen 
los valores que se pasan a la funcion. En el caso de jHola mundo!, Son las palabras "jHola, 
mundo!" lo que se transfieren como parametros: 

Codigo: JavaScript 

alert ('Hola mundo!'); 

Donde colocar el codigo en la pagina 

Los codigos JavaScript son insertados a traves del elemento <script>. Este elemento tiene un 
atributo de tipo que se utiliza para indicar el tipo de lenguaje que vamos a utilizar. En nuestro 
caso, es JavaScript, pero podria ser otra cosa, como por ejemplo VBScript, aunque esto es 
extremadamente raro. 

En HTML 4 y XHTML 1.x, el tipo de atributo es obligatorio. En contraste, en HTML5, no lo es. 
Esta es la razon por la que los ejemplos aqui mostrados, no incluiran este atributo. Si no estas 
usando HTML5, sabemos que el atributo de tipo toma como valor text / javascript, que es en 
realidad el tipo MIME de un codigo Javascript. 

El tipo MIME es un identificador que describe un formato de datos. Aqui, con text / javascript, 
se trata de datos de texto y JavaScript. 

Javascript "en la pagina" 

Para situar el codigo JavaScript directamente en una pagina web, nada mas simple, siguiendo 
el ejemplo de jHola, mundo!: se coloca el codigo en el elemento <script>: 

Codigo: HTML 


<!DOCTYPE html> 

<html> 

<head> 

<title>jHola Mundo!</title> 
</head> 

<body> 

<script> 

alert('jHola Mundo!'); 
</script> 

</body> 

</html> 


Encuadramiento de caracteres reservados 
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Si utilizas el estandar HTML 4.01 y XHTML 1.x a menudo, es necesario utilizar comentarios 
de encuadramiento para que la pagina cumpla con las normas. Si por contra, como en este 
supuesto, se utiliza el estandar HTML5, los comentarios de encuadramiento son inutiles. 

Los comentarios de encuadramiento se utilizan para aislar el codigo Javascript para que el 
Validator W3C (World Wide Web Consortium) no los interprete. Por ejemplo, si tu codigo 
Javascript contiene galones < y >, el validador cree que HTML no esta cerrado, por lo que 
anularia la pagina. Esto no es grave en si mismo, sino que una pagina sin errores, siempre es 
preferible. 

Los comentarios de encuadramiento son como los comentarios HTML: 

Codigo: HTML 

<body> 

<script> 

<!— 

valor_1 > valor_2; 

//--> 

</script> 

</body> 

Javascript externo 

Es posible, y conveniente escribir el codigo JavaScript en un archivo externo con la extension. 
Js. Este archivo se llama desde la pagina web mediante el elemento <script> y su atributo src 
que contiene la direccion URL del archivo. js. 

He aqui un pequeno ejemplo: 

Codigo: JavaScript - contenido de ficheros hola.js 

alert ('jHola mundo!'); 

Codigo: HTML - Pagina Web 

<! DOCTYPE html> 

<html> 

<head> 

<title>jHola mundo!!</title> 

</head> 

<body> 

<script src="hola.js"></script> 
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</body> 

</html> 

Se supone que el archivo hola.js se encuentra en el mismo directorio que el programa en 
HTML. 

Posicion del elemento <script> 

La mayoria de los cursos de Javascript, y ejemplos, muestran la necesidad de colocar el 
elemento <script> dentro de <head> cuando se utiliza para cargar un archivo javascript. Eso es 
correcto, si, pero hay mejoras. 

Una pagina web es leida por el navegador de forma lineal, es decir, en primer lugar lee <head>, 
despues los elementos de <body> uno despues del otro. Si se llama a un archivo JavaScript 
desde el principio de la carga de la pagina, el navegador por lo tanto cargara este archivo, y si 
es grande, la carga de la pagina se desacelerara. Esto es normal, ya que el navegador cargara 
el archivo antes de empezar a mostrar el contenido de la pagina. 

Para superar este problema, es conveniente colocar los elementos <script> justo antes de 
cerrar <body> (algunos navegadores modernos lo hacen automaticamente) como el siguiente 
ejemplo: 

Codigo: HTML 

<!DOCTYPE html> 

<html> 

<head> 

<title>jHola Mundo!</title> 

</head> 

<body> 

<P> 

<!— 

Contenido de la pagina Web 

—> 

</p> 

<script> 

// Un poco de codigo JavaScript... 

</script> 

<script src="hola.js"></script> 

</body> 

</html> 

Resumen 
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Las instrucciones deben estar separadas por un punto y coma. 

Un codigo JavaScript bien presentado es mas legible y mas facil de editar. 

Es posible incluir comentarios con los caracteres 11,1* y I*. 

Los codigos Javascript son colocados en un elemento de script. 

Es posible incluir un archivo JavaScript con el atributo src del elemento <script>. 
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Variables 

A lo largo de la lectura, descubriras el uso de variables, los principales tipos que pueden 
contener y sobre todo la forma de hacer tus primeros calculos. Tambien se presenta la 
concatenacion y los tipos de conversion. Y, por ultimo, una parte importante de este capitulo 
trata el uso de una nueva caracteristica que permite interactuar con el usuario. 

<i,Que es una variable? 

En pocas palabras, una variable es un espacio de almacenamiento en un ordenador para 
grabar cualquier tipo de datos como una cadena de caracteres, un valor numerico o estructuras 
un poco mas especificas. 

Declarar una variable 

En primer lugar, ^que significa "declarar una variable" significa? Se trata simplemente de 
espacio de almacenamiento de reserva en memoria, nada mas. Una vez que se declara la 
variable, puedes comenzar a almacenar datos sin problema. 

Para declarar una variable, primero debes encontrar un nombre. Es importante destacar que 
el nombre de una variable puede contener solo caracteres alfanumericos, es decir, letras de la 
A a la Z y numeros del 0 al 9, guion bajo (_) y dolar ($) tambien son aceptados. Algo mas: el 
nombre de la variable no puede comenzar con un numero y no puede consistir unicamente de 
palabras clave utilizadas por Javascript. Por ejemplo, no se puede crear una variable llamada 
var porque encontraras que esta palabra clave ya esta en uso, sin embargo, puedes crear una 
variable llamada var_. 

En las palabras clave utilizadas por JavaScript, se pueden llamar "palabras reservadas", 
simplemente porque no tienes el derecho de usarlos como nombres de variables. Encontraras 
en esta paaina (en Ingles) todas las palabras reservadas en Javascript. 

Para declarar una variable, simplemente hay que escribir la siguiente linea: 

Codigo: JavScript 


var miVariable; 


JavaScript es un lenguaje sensible en las denominaciones, ten cuidado de no confundir 
las mayusculas y minusculas. En el siguiente ejemplo, tenemos tres variables diferentes 
declaradas: 

Codigo: JavaScript 
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var miVariable; 
var mivariable; 
var MIVARIABLE; 

La palabra clave var esta presente para indicar que se declara una variable. Una vez que se 
declara, se puede almacenar lo que quieras: 

Codigo: JavaScript 


var miVariable; 
miVariable = 2; 

El signo = se utiliza para asignar un valor a la variable, aqui le hemos asignado el numero 2. 
Cuando das un valor a una variable, decimos que se trata de una asignacion, ya que asigna un 
valor a la variable. 

Es posible simplificar el codigo en una sola linea: 

Codigo: JavaScript 


var miVariable = 5.5 II Como puedes ver, los numeros decimales se 
separan con un punto 

Del mismo modo, puedes declarary asignar variables en una sola linea: 

Codigo: JavaScript 


var miVariablel, miVariable2 = 4, miVariable3; 

Aqui hemos declarado tres variables en una fila, pero solo la segunda tiene valor asignado . 
Y la ultima posibilidad, que puede ser util de vez en cuando: 

Codigo: JavaScript 


var miVariablel, miVariable2; 
miVariablel = miVariable2 = 2; 

Ambas variables ahora contienen el mismo numero 2. Puedes hacer lo mismo con tantas 
variables como desees. 

Tipos de variables 
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A diferencia de muchos lenguajes, JavaScript es un lenguaje de tipado dinamicamente. Esto 
significa, generalmente, que cualquier declaracion de variables se hace con la palabra clave var 
independientemente de su contenido, mientras que en otros lenguajes, como el C, es necesario 
especificar el tipo de contenido que tendra que contener la variable. 

En Javascript, nuestras variables son tipadas dinamicamente, lo que significa que puedes 
asignarle texto primero y luego borrarlo y poner un numero cualquiera y sin restricciones. 

Vamos a empezar por ver cuales son los tres tipos principales de Javascript: 

El tipo numerico (numero): represents cualquier numero, ya sea un entero, un numero 
negativo, en notacion cientifica, etc. En pocas palabras, este es el tipo de numeros. 

Para asignar un tipo numerico a una variable, solo tienes que escribir el numero var 
numero = 5; Al igual que muchos lenguajes, JavaScript reconoce varios formatos para 
los numeros, como por ejemplo escribir var numero = 5.5 o en notacion cientifica var 
numero = 3.65 e5, o escribir el numero hexadecimal, var numero= 0x391; En resumen, 
hay diferentes maneras de escribir los valores numericos. 

Cadenas de caracteres (alias string ): Este tipo represents texto. Puede asignarse de 
dos maneras diferentes. 

Codigo: JavaScript 


var textl = "Mi primer texto" / / Con comillas 
var text2 = 'Mi segundo mensaje' / / Con apostrofos 

Es importante tener en cuenta que si escribes miVariable var = '2 ', el tipo de esta 
variable es 

cadena de caracteres y no un tipo numerico. 

Otro punto importante, si usas apostrofos para "enmarcar" el texto y deseas utilizar 
apostrofos en el texto mismo, entonces tienes que "escapar" de los apostrofos como se 
indica seguidamente: 

Codigo: JavaScript 


var text = 'Esto V es algo '; 

d,Por que esto? Porque si no cancelas tu apostrofo, Javascript cree que el texto se 
detiene en el apostrofo contenido en la palabra "es". Ten en cuenta que este problems 
es identico al de las comillas. 

En nuestro caso, solemos utilizar apostrofos pero cuando el texto los contiene tambien 
entonces las comillas pueden ser muy utiles. 
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Booleanos (booleano): son un tipo particular de que se tratara mas adelante. Mientras 
tanto, en pocas palabras, un tipo booleano permite dos estados verdadero o falso. Estos 
dos estados se puede escribir como sigue: 

Codigo: JavaScript 


var EsVerdader = true; 
var EsFalso = false; 

Hay otros tipos, que se consideraran cuando sea necesario. 

Prueba de la existencia de variables con typeof 

Puede ser que tengas en alguna ocasion la necesidad de probar la existencia de una variable o 
comprobar su tipo. En tales situaciones, la instruccion typeof es muy util, asi es como se usa: 

Codigo: JavaScript 


var numero = 2; 

alert (typeof numero ) / / Muestra: « number » 
var text = "mitexto"; 

alert (typeof mitexto) / / Muestra: « string » 
var aBoolean = false; 

alert (typeof aBoolean) / / Muestra: « boolean » 
Y ahora como probar la existencia de una variable: 

Codigo: JavaScript 


alert (typeof nada) / / Muestra: « undefined » 

Es un tipo de variable muy importante. Si la instruccion typeof devuelve undefined es que la 
variable es inexistente o esta declarada pero no contiene nada. 

Operadores aritmeticos 

Ahora que se declara una variable y se asignar un valor, podemos comenzar la seccion sobre 
los operadores aritmeticos. Se vera mas adelante que hay varios tipos de operadores, pero por 
ahora nos centraremos exclusivamente en los operadores aritmeticos. Estos son la base para 
todos los calculos y son cinco. 
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Operador 

Simbolo 

suma 

+ 

sustraccion 

- 

multiplicacion 

* 

division 

/ 

modulo 

% 


El ultimo operador, modulo, es simplemente el resto de una division. Por ejemplo, si se divide 5 
entre 2 se tiene resto 1, que es el modulo. 

Algunos calculos sencillos 

Programar el calculo es casi tan facil como en una calculadora, por ejemplo: 

Codigo: JavaScript 


var resultado = 3 + 2; 

alert (resultado) / / Muestra « 5 » 

Asi que puedes hacer calculos con dos numeros, es bueno, pero con dos variables que 
contienen numeros en si es mas util: 

Codigo: JavaScript 

var numeral =3, numero2 = 2, resultado; 
resultado = numeral * numero2; 
alert (resultado) / / Muestra: « 6 » 

Podemos ir aun mas lejos al escribirlo como calculos con operadores multiples y variables: 
Codigo: JavaScript 


var divisor = 3, resultadol, resultado2, resultado3; 

resultado 1 = (16 + 8) / 2 - 2;//10 

resultado2 = resultadol / divisor; 

resultado3 = resultadol % divisor; 

alerta (resultado2) / / Resultado de la division: 3,33 
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alerta (resultado3) / / Resto de la division: 1 

Notaras que usamos parentesis para el calculo de la variable resultadol. Se utilizan como en 
matematicas: el navegador que primero calcula 16 + 8 y divide el resultado por 2. 

Simplificar los calculos 

A veces tendras que escribir cosas como: 

Codigo: JavaScript 


var numero = 3; 

numero = numero + 5; 

alert (numero) / / Muestra: « 8 » 

Esto no es particularmente largo o complicado de hacer, pero puede convertirse rapidamente 
en un proceso de enormes proporciones, existe una manera de agregar un numero a una 
variable: 

Codigo: JavaScript 


var numero = 3; 
numero + = 5; 

alert (numero) / / Muestra: « 8 » 

Este codigo tiene el mismo efecto que el anterior, pero es mas rapido de escribir. Ten 
en cuenta que esto no solo se aplica a las sumas, pero trabaja con los otros operadores 
aritmeticos: 


/ = 
% = 


Introduccion a la concatenacion y conversion de tipos 

Algunos operadores se han omitido previamente. Toma el operador +, ademas de las sumas, 
se puede hacer lo que se conoce como concatenacion entre cadenas. 

Concatenacion 

La concatenacion es anadir una cadena al final de otra, como en este ejemplo: 

Codigo: JavaScript 
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var hola= 'Hola', nombre = 'tu', resultado; 

resultado = hola + nombre; 

alert (resultado) / / muestra: « Holatu » 


En este ejemplo se muestra la frase "Holatu". Te daras cuenta de que no hay espacio entre las 
dos palabras, de hecho, es la concatenacion de lo que se definio en las variables. Si quieres 
un espacio, debes agregar un espacio en una variable, como var hola = 'Hola 

Si se recuerda el ejemplo previo de adicion, que se expresaba +=, se puede actuar de forma 
analoga con cadenas de caracteres: 

Codigo: JavaScript 


var text = "Hola 
texto + = 'tu'; 

alert (texto) / / Muestra « Hola tu ». 

Interactuar con el usuario 

La concatenacion es un buen momento para introducir la primera interaccion con el usuario a 
traves de la funcion prompt (). He aqui como se usa: 

Codigo : JavaScript 


var NombreUsuario = prompt('lntroduce nombre:'); 
alert(NombreUsuario); // Muestra el nombre introducido 


fig pag 29 


La funcion prompt () se utiliza como alert (), pero tiene una pequeha particularidad. Devuelve lo 
que el usuario escribio bajo una cadena de caracteres, es por eso que escribio esto: 

Codigo: JavaScript 

var texto = prompt ('Entra algo:'); 

Asi, el texto escrito por el usuario terminara almacenado directamente en el texto variable. 
Ahora podemos tratar de saludar a nuestros visitantes: 
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Codigo: JavaScript 

var inicio = 'Hola', nombre, final = '!', resultado; 
nombre= prompt ("^Cual es tu nombre? '); 
resultado = inicio + nombre + final 
alert (resultado); 

Ten en cuenta que en nuestro caso concatenamos cadenas de caracteres, pero se pueden 
concatenar una cadena y un numero de la misma manera: 

Codigo : JavaScript 


var text o= 'Un nombre :numero= 42, resultado; 

resultado= texto + numero; 

alert(resultado); // Muestra: « Un nombre : 42 » 

Conversion de una cadena de caracteres en numero 

Ahora trataremos de hacer una adicion con numeros proporcionados por el usuario: 

Codigo: JavaScript 

var primero, segundo, resultado; 

primero = prompt ('Introduzca el primer numero:"); 

segundo = prompt ('Introduzca el segundo numero:'); 

resultado = primero + segundo; 

alert (resultado); 

Si has probado este codigo, te habras dado cuenta de que hay un problema. Supongamos que 
has escrito dos veces el digito 1, el resultado sera 11 ... <^Por que? La razon se ha escrito unas 
lineas mas arriba: 

Se devuelve al usuario lo que ha escrito bajo forma de una cadena de caracteres [...] 

El problema es que todo lo que se escribe en el campo de texto prompt () se recupera como 
una cadena de caracteres, aunque sea un numero. Por lo tanto, si se utiliza el operador +, no 
sera una suma sino una concatenation. 

Se ha de efectuar una conversion. El concepto es simple: convertir la cadena en un numero. 
Para ello, necesitaras la funcion parselnt () que se utiliza de esta manera: 

Codigo: JavaScript 


var texto = '1313', numero; 
numero = parselnt(texto); 
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alert(typeof numero); // Muestra : « numero » 
alert(numero); // Muestra : « 1313 » 

Ahora que ya sabes como usarlo, vamos a ser capaces de adaptar nuestro codigo: 

Codigo: JavaScript 

var primero, segundo, resultado; 
primero = prompt ('Ingrese el primer numero:"); 
segundo = prompt ('Ingrese el segundo numero:'); 
resultado = parselnt (primero) + parselnt (segundo); 
alert (resultado); 

Ahora, si escribes dos veces la cifra 1, el resultado es 2. 

Conversion de un numero en una cadena 

Para concluir esta seccion, veremos como convertir un numero en una cadena. Ya es posible 
concatenar un numero y una cadena sin conversion, pero no dos numeros, tal como se les 
anadio debido a la utilizacion de +. Por lo tanto necesito convertir un numero en cadena. 

Codigo: JavaScript 


var texto, numeral = 4, numero2 = 2; 
text = numeral + ’ ’ + numero2; 
alert (texto) / / Muestra: « 42 » 

d,Que hemos hecho? Acabamos de anadir una cadena vacia entre los dos numeros, lo que 
tiene por efecto convertirlos en cadenas. Hay una solucion un poco menos arcaica que anadir 
una cadena vacia, la encontraras mas adelante. 

Resumen 

- Una variable es una manera de almacenar un valor. 

- Usamos la palabra clave var para declarar una variable, y usamos = para asignar un valor a la 
variable. 

- Las variables se escriben de forma dinamica, lo que significa que no es necesario especificar 
el tipo de contenido que la variable contendra. 

- Con diferentes operadores, podemos hacer las transacciones entre las variables. 

- El operador + concatena cadenas de caracteres, es decir, de inicio a fin. 
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La funcion promptQ permite interactuar con el usuario. 
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Condicionales 

En el capitulo anterior se aprendio como crear y modificar variables. Todavia se siente un 
tanto limitados nuestros codigos. En este capitulo, descubriras las condiciones de todo tipo y 
especialmente darse cuenta de que las posibilidades del codigo seran mucho mas abiertas 
porque las condicionales afectaran directamente como el codigo va a reaccionar a ciertos 
criterios. 

En la mayoria de las condicionales, tambien se podra profundizar mediante un tipo famoso de 
variable: boolean. 

La base de cualquier condicion: booleana 

En este apartado, vamos a discutir las condicionales, pero para eso primero tenemos que 
volver a un tipo de variable que hemos mencionado en el capitulo anterior: booleanas. 

d,Para que van a servir? Para obtener un resultado como verdadero {true) o falso {false) cuando 
se verifica una condicion. Para aquellos que se preguntan el significado , una condicion es una 
especie de "test" para comprobar que una variable contiene un cierto valor. Por supuesto, las 
comparaciones no se limitan solo a las variables, pero por el momenta lo vamos a considerar 
mas que suficiente para comenzar. 

En primer lugar, <-,cuales son las condiciones establecidas? Valores a ensayar dos tipos de 
operadores: uno logico y el otro de comparacion. 

Los operadores de comparacion 

Como su nombre indica, estos operadores pueden realizar comparaciones entre diferentes 
valores entre ellos. En total, hay muchos, ocho, aqui estan: 


Operador 

Significado 

= 

Igual a 

!= 

Diferente a 

=== 

Contenido y tipo igual a 

!== 

Contenido o tipo diferente de 

> 

Mayor que 

>= 

Mayor o igual que 
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< 

Menor que 

<= 

Menor o igual que 


No vamos a hacer un ejemplo para cada uno de ellos, pero por lo menos te mostraremos como 
utilizarlos para que puedas probar el otro:s 

Codigo: JavaScript 


var numerol = 2, numero2 = 2, numero3 = 4, resultado; 

resultado = numerol == numero2 / / En lugar de un unico valor, se han 
escrito dos con el operador de comparacion entre ellos 
alert (resultado) / / Muestra "true", si la condicion se verifica porque las 
dos variables contienen el mismo valor 

resultado = numerol == numero3; 

alert (resultado) / / Muestra "false", la condicion no es verificada porque 2 
es distinto de 4 

resultado = numerol < numero3; 

alert (resultado) / / Muestra "true", la condicion es verdadera porque 2 es 
inferior a 4 

Como se puede ver, el concepto no es muy complicado, simplemente escribe dos valores con 
el operador de comparacion deseado entre los dos y devuelve un booleano. Si esto es true 
(verdadero), entonces la condicion esta verificada, si es false (falsa), entonces no. 

De estos ocho operadores, dos de ellos pueden ser dificiles de entender para un principiante: 
se trata === y ! ==. de modo que se indica como trabajan con algunos ejemplos: 

Codigo: JavaScript 

var numero = 4, text = '4 ', resultado; 
resultado = numero == texto; 

alert (resultado) / / Muestra "verdadero", mientras que "numero" es un 
numero y el "texto" de una cadena de caracteres 
resultado = numero === texto; 

alert (resultado) / / Muestra "false" porque este operador tambien compara 
tipos de variables en adicion a sus valores 
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Los condiciones "normales" hacen conversiones de tipos para verificar las igualdades de modo 
que si se quiere diferenciar el numero 4 en una cadena de caracteres que contiene el numero 4 
entonces tienes que utilizar la igualdad triple ===. 

Para todos los operadores de comparacion, tienes todas las herramientas que se necesitan 
para hacer experimentos. 

Operadores logicos 

d,Por que estos operadores se denominan como "logicos"? Puesto que funcionan con el mismo 
principio como una tabla electronica de verdad. Antes de describir su funcionamiento, lo 
primero que debes hacer es una lista, son tres: 


Operador 

Tipo de logica 

Utilizacion 

&& 

Y 

valorl && valor2 

II 

0 

valorl || valor2 

! 

NO 

Ivalor 


- Operador Y (AND) 

Este operador satisface la condicion true cuando todos los valores que se pasan al mismo son 
verdaderos. Si uno de ellos es false, entonces la condicion no sera verificada. Por ejemplo: 

Codigo: JavaScript 

var resultado = true && true; 

alert (resultado) / / Muestra "verdadero" 

resultado = true && false; 

alert (resultado) / / Muestra: "false" 

resultado = false && false; 
alert (resultado) / / Muestra: "false" 

- Operador O (OR) 

Este operador es mas "flexible" porque devuelve true (verdadero) si uno de los valores que 
contiene es verdadero, no importan otros valores. Por ejemplo: 

Codigo: JavaScript 
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var resultado = true | | verdadero; 
alert (resultado) / / Muestra "verdadero" 

resultado = true 11 false; 

alert (resultado) / / Muestra "verdadero" 

resultado = false 11 false; 

alert (resultado) / / Muestra: "false" 


- El operador NO (NOT) 

Este operador se diferencia de los otros dos porque necesita solo un valor. Se le llama "NO", 
porque su funcion es la de invertir el valor que se le pasa y se convierte verdadero en falso y 
viceversa. Por ejemplo: 

Codigo: JavaScript 


var resultado = false; 

resultado =! resultado II se almacena en "resultado" el inverso 
de "resultado” ello, es posible 

alert (resultado) // Muestra "true" porque queriamos el opuesto de "false" 
resultado = ! resultado; 

alert (resultado) / / Muestra "false", ya que se invirtio de nuevo, como 
resultado, "se cambia de "true" a "false" 


- Combinacion de operadores 

Estamos casi al final de la seccion sobre valores booleanos, no te preocupes, sera mas facil el 
resto del capitulo. Sin embargo, antes de continuar, debes asegurarte de que entiendes que 
todos los operadores que acabas de descubrir puedes combinarlos. 

En primer lugar un breve resumen (leer atentamente): los operadores de comparacion toma 
dos valores de entrada y devuelven un booleano, mientras que los operadores logicos aceptar 
la entrada del multiples booleanos y devuelven un booleano. Habras entendido que entonces 
puedes acoplar los valores de salida de los operadores de comparacion con los valores de 
entrada de los operadores logicos. Por ejemplo: 

Codigo: JavaScript 


var condicionl, resultado, condicion2; 
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condicionl = 2> 8 II false 
condicion2 = 8> 2 II true 
resultado = condicionl && condicion2; 
alert (resultado) / / Muestra "false" 

Por supuesto, es posible acortar el codigo si se combinan en una sola linea, todas las 
condiciones: 

Codigo: JavaScript 


var resultado = 2> 8 && 8> 2; 
alert (resultado) / / Muestra "false" 


Condicion "if else" 

Finalmente se discuten las condiciones. O, mas precisamente, las estructuras condicionales, 
ahora podemos escribir la palabra "Condicion" que todavia sera mas rapido para escribir y leer. 

Por encima de todo, ten en cuenta que hay tres tipos de condiciones, vamos a empezar con la 
condicion if else que se utiliza con frecuencia. 

Pero <-,no hemos visto antes de los operadores condicionales para obtener un resultado? De 
hecho, podemos obtener el resultado como un valor logico, pero eso es todo. Ahora, seria 
bueno que el resultado pudiera afectar a la ejecucion del codigo. De inmediato voy a entrar en 
el nucleo de la cuestion con un ejemplo muy bueno y simple: 

Codigo: JavaScript 


if (true) { 

alert ("Este mensaje se muestra bien."); 

} 

if (false) { 

alert ("No hay necesidad de insistir, este mensaje no se mostrara."); 

} 

En primer lugar, veamos de que esta constituida una condicion: 
o De la estructura condicional if; 

o Parentesis que contienen la condicion de analizar, o mas precisamente el valor 
booleano devuelto por los operadores condicionales; 
o Llaves que definen la porcion de codigo que se ejecutara si la condicion es 
verdadera. Notese que colocamos aqui la primera Nave al final de la primera 
linea de condicion, pero puede colocarse mas o menos como se desee (por 
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debajo, por ejemplo). 

Como se puede ver, el codigo de condicion se ejecuta si el booleano recibido es true 
(verdadero), mientras que false (falso) evita la ejecucion de codigo. 

Y en vista de que los operadores condicionales reenvian booleanos, vamos a ser capaces de 
usarlos directamente en nuestras condiciones: 

Codigo: JavaScript 


if (2 <8 && 8> = 4) {/ / Esta condicion devuelve "true", entonces el codigo 
se ejecuta 

alert ('La condicion esta verificada.'); 

} 

if (2> 8 | | 8 <= 4) {/ / Esta condicion devuelve "false", el codigo no se 
ejecuta 

alert ("La condicion no se verifica, pero nunca lo sabra, pues el codigo no 
se esta ejecutando 
} 

Como se puede constatar, antes de que descompongamos todas las etapas de una condicion 
en varias variables, recomendamos ponerla en una sola linea, asi sera mas rapida de escribir y 
mas facil de leer. 

Funcion confirm () 

Vamos a aprender como usar una caracteristica muy util: confirm (). Su uso es sencillo: se 
pasa un parametro que es una cadena que se mostrara en pantalla y lo vuelve a booleano 
dependiendo de la accion del usuario,. Por ejemplo: 

Codigo: JavaScript 

if (confirm ('^Desea ejecutar el codigo javascript de esta pagina? 

')){ 

alert ('El codigo se ha ejecutado bien') 


El codigo se ejecuta cuando se hace clic en el boton Aceptar y no se ejecuta cuando se haga 
die en el boton Cancelar (ambos botones aparecerian en pantalla, junto con la pregunta de si 
se desea usar el codigo JavaScript). En resumen: en el primer caso, la funcion devuelve true y 
en el segundo caso, devuelve false. Lo que hace que sea una caracteristica muy conveniente 
para el uso con las condiciones. 
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Estructura else para decir "si no" 

Ahora supon que deseas ejecutar codigo despues de comprobar una condicion y ejecutar otro 
codigo si no resulta verificado. Es posible ejecutar dos condiciones, pero existe una solucion 
mucho mas simple, la estructura else: 

Codigo: JavaScript 

if (confirm ('Para acceder a este sitio usted debe tener 18 anos o mas, 
haga clic en "OK" si e's el caso.')) { 
alert ('Sera redirigido al sitio.'); 

} 

else { 

alert ("Lo siento, usted no tiene acceso a esta pagina."); 

} 

Como se puede ver, la estructura puede ejecutar codigo si la condicion no se ha verificado, 
y 'rapidamente te daras cuenta de que sera muy util en muchas ocasiones. 

Acerca de la forma de indentar la estructura if else, se recomienda seguir los siguientes pasos: 

Codigo: JavaScript 


if (/ * condicion * /) { 
/ / codigo ... 

} else { 

/ / codigo ... 

} 


Estructura else para decir "si no si" 

Ya sabes ejecutar codigo si una condicion es verdadera y si no es verdad, era pero seria bueno 
saber operar como sigue: 

• Una primera condicion debe analizarse; 

• Una segunda condicion esta presente y se pondra a prueba si la primero falla; 

• Y si ninguna condicion se verifica (es verdadera), la estructura else es entonces la que 
actua. 

Este tipo de estructura es muy util para verificar varias condiciones a la vez y ejecutar su codigo 
correspondiente. La estructura else if lo permite, por ejemplo: 

Codigo: JavaScript 
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var suelo = parselnt (prompt ("Escriba el piso, donde el ascensor deberia parar (-2 a 30):")); 
if (piso == 0) { 

alert ('Usted ya esta en la planta baja.'); 

} else if (-2 <= suelo && piso <= 30) { 
alert ("Direccion a la planta n°" + suelo +'!'); 
else {} 

alert ("El piso especificado no existe."); 

} 

Ten en cuenta que la estructura else if se puede usar repetidamente, lo unico que se necesita 
para trabajar es que debe tener delante de ella una estructura if. 


La condicion "switch" 

Hemos estudiado el funcionamiento de la condicion if else que es muy util en muchos 
casos, sin embargo, no es muy conveniente para cada caso, y es aqui donde es importante 
un “interruptor”, que se logra con la instruction switch. 

Un ejemplo: tenemos un mueble con cuatro cajones, cada uno conteniendo diferentes objetos, 
y es necesario que el usuario pueda conocer el contenido de cada cajon, que ha sido cifrado. Si 
lo hicieramos con if else seria muy largo y tedioso: 

Codigo: JavaScript 


var cajon = parselnt (prompt ('Elegir el cajon abierto (1-4):')); 
if (cajon == 1) { 

alert ('Contiene varias herramientas de dibujo: papel, lapices, etc.') 

} else if (cajon == 2) { 

alert ('Contenido hardware: cables, componentes, etc.') 

} else if (cajon == 3) { 

alert ('^Ah, el cajon esta cerrado malo?'); 

} else if (cajon == 4) { 

alert ('Contiene la ropa: camisas, pantalones, etc.') 

Else {} 

alert ("La noticia del dia: el gabinete contiene solo cuatro cajones y 
hasta que se demuestre lo contrario, los cajones negativos no existen ").; 

} 

Es largo, ^verdad? Ademas de que no es muy adecuado para lo que quieres hacer. El mayor 
problema es tener que volver a escribir siempre la condicion, pero con switch es un poco mas 
facil: 
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Codigo: JavaScript 


var cajon = parselnt (prompt ('Elegir el cajon abierto (1-4):')); 

switch (cajon) { 
case 1: 

alert ('Contiene varias herramientas de dibujo: papel, lapices, etc.') 
break; 

case 2: 

alert ('Contenido hardware: cables, componentes, etc.') 
break; 

case 3: 

alert ('^Ah, el cajon esta cerrado malo?'); 
break; 

case 4: 

alert ('Contiene ropa: camisas, pantalones, etc.') 
break; 

default: 

alert ("La noticia del dia: el gabinete contiene solo cuatro cajones 

y, hasta que se demuestre lo contrario, los cajones negativos no 

existen"); 

} 

Como se puede ver, el codigo no es especialmente corto, pero se organiza mejor y por lo tanto 
es mas comprensible. Ahora el detalle de como funciona: 

Escribimos la palabra clave switch seguida de la variable a analizar entre parentesis y un par 
de Naves; 

Entre las Naves se encuentra en todos los casos la variable definida por la palabra clave case 
seguida del valor se debe tener en cuenta (esto puede ser un numero, o tambien texto) y dos 
puntos; 

Todo lo que sigue a los dos puntos de case se ejecutara si la variable analizada por switch 
contiene el valor de case; 

Al final de case esta la sentencia break para "romper" el switch y asi evitar la ejecucion del 
resto del codigo que contiene; 
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Y finalmente escribir la palabra clave default seguida de dos puntos. El codigo que sigue a esta 
instruccion sera ejecutado si ninguno de los casos anteriores se han ejecutado. Advertencia, 
esta parte es opcional, no es necesario para la integracion con el codigo. 

En general, no tendras problemas para entender el funcionamiento de switch, sin embargo la 
declaracion break puede ser un problema, te invitamos a probar el codigo sin esta instruccion. 

d,Empiezas a entender el problema? Sin la instruccion break se ejecuta todo el codigo 
contenido en switch a partir del case que has seleccionado. Por lo tanto, si eliges el cajon n° 2 
es como si se ejecutara este codigo: 

Codigo: JavaScript 


alert ('Contenido hardware: cables, componentes, etc.') 

alert ('^Ah el cajon esta cerrado malo?'); 

alert ('Contiene la ropa:. camisas, pantalones, etc'); 

alert ("La noticia del dia: el gabinete contiene solo cuatro cajones y hasta 

que se demuestre lo contrario, los cajones negativos no existen").; 

En algunos casos, este sistema puede ser conveniente, pero es extremadamente raro. Antes 
de cerrar este apartado, hay que entender un punto clave: un switch permite ejecutar una 
accion no solo en base a un valor, sino tambien del tipo del valor (como el operador ===), lo 
que significa que el codigo del ejemplo siguiente nunca permitira que aparezca "jBravol”. 

Codigo: JavaScript 


var cajon = prompt ('Ingrese el valor 1'); 

switch (cajon) { 
case 1: 

alert ('jBravol'); 
break; 

default: 

alert ('Perdido'); 

} 

De hecho, hemos eliminado la funcion parselnt () de nuestro codigo, lo que significa que 
pasamos una cadena de caracteres a nuestro switch. Dado que tambien verifica los tipos de 
valores, el mensaje "jBravo !" nunca aparecera en la pantalla. 

Sin embargo, si cambiamos la primera case para comprobar una cadena en lugar de un 
numero, no se tiene ningun problema: 
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Codigo: JavaScript 


var cajon = prompt ('Ingrese el valor 1'); 
switch (cajon) { 
case '1 

alert ('jBravo!'); 
break; 

default: 
alert ('Lost'); 

} 

Condiciones ternarias 

Y finalmente aqui esta el ultimo tipo de condicional, el ternario. Veras que son muy especiales, 
en primer lugar, porque son muy rapidas para escribir (pero no leer) y sobre todo porque 
devuelven un valor. 

Para que puedas entender que escenario se puede utilizar las condiciones ternarias, vamos a 
empezar por un pequeho ejemplo con la condicion if else: 

Codigo: JavaScript 

Mensajeinicio var = 'Su categoria:', 

Mensajefin, 

adulto = confirm ('<j,Eres mayor de edad? '); 

if (adulto) {/ / La variable "adulto" contiene un valor logico (booleano), 
podemos por lo tanto, presentar directamente la estructura if sin ningun 
operador condicional 
Mensagefin = '18 + '; 
else {} 

Mensagefin = '-18'; 

} 

alert (Mensageinicio + Mensagefin); 

Como se puede ver, el codigo es bastante largo suficiente para un resultado menor. Con 
ternarios se puede ayudar a simplificar el codigo de manera significativa: 

Codigo: JavaScript 


var Mensageinicio = 'Su categoria:', 
Mensagefin, 

adulto = confirm ("<j,Eres mayor de edad? '); 
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Mensagefin = adulto ? '18 + -181 

alert (Mensageinicio + Mensagefin); 

Entonces, ^como es el ternario? Para entender esto debemos mirar la linea 4 del codigo 
anterior: Mensagefin = adulto? '18 + ':' -18 '; 

Si desglosamos esta linea se puede ver: 

• Variable Mensagefin que va a recibir el resultado del ternario; 

• Adulto variable que sera analizada por el ternario; 

• Un signo de interrogacion seguido de un valor (numero, texto, etc.) 

• Dos puntos (:) seguidos de un segundo valor, y, finalmente, punto y coma marca el final 
de la linea de comandos. 

El funcionamiento es sencillo: si la variable adulto es true (verdadera) entonces el valor 
devuelto por la condition ternaria sera el escrito despues del signo de interrogacion, si es false 
(falsa), entonces el valor devuelto sera el que aparece despues de los dos puntos. 

No es muy complicado. Las condiciones ternarias son muy rapidas y faciles de escribir, pero 
tienen una mala reputation de ser bastante ilegibles (no los note facilmente en lineas de 
codigo). Muchas personas desaconsejan el uso, por nuestra parte te recomendamos que las 
utilices porque son muy utiles. 

Condiciones sobre las variables 

JavaScript es un lenguaje unico en su sintaxis, te daras cuenta mas adelante, si ya sabes otro 
lenguaje de programacion mas "convencional". El caso particular que hemos estudiado se 
refiere a las variables de prueba: es posible probar si una variable tiene un valor sin utilizar la 
instruction typeofl. 

Prueba de la existencia de contenido de una variable 

Para probar la existencia de contenido de una variable, primero debes saber que todo esta en 
la conversion de tipos. Sabras que las variables pueden ser de varios tipos: numeros, cadenas 
de caracteres, etc. Descubriras que el tipo de una variable (cualquiera que sea) se puede 
convertir en booleano incluso si tiene una base de numero o cadena de caracteres. Un ejemplo 
simple: 

Codigo: JavaScript 


var Testcondicion = '^Va a funcionar? <-,No funcionara ?'; 
if (Testcondicion) { 
alert ('Funciona'); 

} else { 

alert ('No funciona'); 
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} 

El codigo muestra el texto "Funciona". <^Por que? Simplemente porque la variable 
Testcondicion 

se convierte en booleana y su contenido se evalua como true (verdadero). ^Que es un 
contenido verdadero o falso? Simplemente con enumerar los contenidos falso basta para 
saberlo: un numero que es cero o una cadena nula. Es decir, estos dos casos son los unicos 
que deben ser evaluados como falso. Despues de esto es posible evaluar atributos, metodos, 
objetos, etc. Por supuesto, el valor undefined se evalua como falso. 

Operador O 

Su funcion principal es ser utilizado para devolver la variable primera con un valor evaluado 
true. Por ejemplo: 

Codigo: JavaScript 


var condicionTestl =", condicionTest2 = 'Una cadena de caracteres'; 
alert (conditionTestl | | conditionTest2); 

Al final el codigo devuelve "Una cadena de caracteres". ^Por que? Pues porque el operador O 
se carga para devolver el valor de la primera variable cuyo contenido se evalua como true. Esto 
es extremadamente util. 


Resumen 

• Una condicion devuelve un valor booleano: true o false. 

• Existen muchos operadores para verificar condiciones de ensayo y se pueden combinar 
juntos. 

• La condicion if else es la mas comun y permite combinar las condiciones. 

• Cuando se trata de probar la igualdad entre varios valores, la condicion switch es 
preferible. 

• El ternario es una forma concisa de escribir las condiciones if else y tienen la ventaja de 
devolver un valor. 
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Bucles 

En este capitulo se hara hincapie en un comportamiento interesante: en realidad se ve 
como se programan las acciones de repeticion, para no escribir repetidamente las mismas 
instrucciones. Pero antes de eso, vamos a discutir el tema del incremento. 

Incremento 

Considera el calculo siguiente: 

Codigo: JavaScript 


var numero = 0; 
numero = numero + 1; 

La variable numero contiene el valor 1. La instruccion para anadir uno es bastante pesada para 
escribir y recordar, somos perezosos. Javascript, al igual que otros lenguajes de programacion, 
permite lo que se llama incremento y su opuesto decremento, 

- Funcionamiento 

El incremento agrega una unidad a un numero utilizando una sintaxis corta. En contraste, el 
decremento permite restar uno. 

Codigo: JavaScript 


var numero = 0; 
numero ++; 

alert (numero) / / Muestra: "1" 
numero 

alert (numero) / / Muestra: "0" 

Se trata por lo tanto un metodo lo suficientemente rapido como para sumar o restar una unidad 
a una variable (se dice incremento o decremento), y esto sera especialmente util en este 
capitulo. 

- El orden de los operadores 

Hay dos formas de uso del incremento, de acuerdo con la posicion del operador ++ (o --). 
Vimos que se podia colocar despues de la variable, pero puede situarse delante. Pequeno 
ejemplo: 

Codigo: JavaScript 
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numero_1 var = 0; 
numero_2 var = 0; 
numero_1++; 

++numero_2; 

alert (numero_1) / / Muestra: "1" 
alert (numero_2) / / Muestra: "1" 

numero_1 y numero_2, tienen dos incrementos. <-,Cual es la diferencia entre los dos 
procedimientos? La diferencia esta en el hecho de prioridad de la operacion, y es importante si 
se desea recuperar el resultado del incremento. En el siguiente ejemplo, ++numero devuelve el 
valor de numero incrementado, es decir 1. 

Codigo: JavaScript 


var numero = 0; 
varsalida = ++numero; 
alert (numero) / / Muestra: "1" 
alert (salida) / / Muestra: "1" 

Ahora, si el operador se coloca despues del incremento variable, la operacion devuelve el valor 
del numero antes de que se incremente: 

Codigo: JavaScript 


var numero = 0; 
varsalida = numero++; 
alert (numero) / / Muestra: "1" 
alert (salida) / / Muestra: "0" 

Aqui, por lo tanto, la operacion numero++ no ha devuelto numero con el valor incrementado. 

Bucle while 

Un bucle es una estructura condicional, similar a lo visto previamente, excepto que se trata de 
repetir una serie de instrucciones. La repeticion es hasta que lo indique el bucle. 

Cada vez que el bucle se repite se efectua una iteracion (que en realidad es un sinonimo de 
repeticion). 
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Funcionamiento del bucle while 

Para ejecutar un bucle, es necesario definir una condicion. Mientras que sea verdadera 
(true), el bucle se repite. Una vez que la condicion es falsa (false), el bucle se detiene. Aqui se 
muestra un ejemplo de la sintaxis de un bucle while: 

Codigo: JavaScript 


while (condicion) { 
sentencia_1; 
sentencia_2; 
sentencia_3; 

} 


Repetir mientras que ... 

El bucle se repite mientras que la condicion sea valida. Esto significa que hay que fijar a la 
vez, de modo que la condicion ya no lo es, de lo contrario el bucle se repetira indefinidamente. 
Como ejemplo, vamos a incrementar un numero, que es 1, hasta 10: 

Codigo: JavaScript 


var numero = 1; 
while (numero <10) { 
numero++; 

} 

alert (numero)/ / Muestra: "10" 

En primer lugar, el numero es 1. Al llegar al bucle preguntara si el numero es menor que 
10. Como es verdadero, se ejecuta el bucle, y el numero se incrementa. Siempre que las 
instrucciones en el bucle se esten ejecutado, la condicion del bucle es reevaluada sobre la 
conveniencia de volver a ejecutar el bucle o no. En este ejemplo, el bucle se repite hasta que 
el numero es igual a 10. Si el numero es 10, el numero de condicion <10 es falso, y se detiene 
el bucle. Cuando el bucle termina, las instrucciones posteriores al bucle (alert () en nuestro 
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ejemplo) se ejecutan normalmente. 

Ejemplo practico. Imagina un pequeno script que te preguntara el nombre del usuario y los 
nombres de sus hermanos y hermanas. No es complicado hacer, se trata de mostrar un cuadro 
de dialogo con prompt () para cada nombre. 

Pero, icomo saber con antelacion el numero de hermanos y hermanas? Vamos a utilizar un 
bucle while que pide a cada paso del bucle, un nombre. El bucle solo se detiene cuando el 
usuario elige no entrar un nombre. 

Codigo: JavaScript 


var = nicks = 'nick, 
proceso = true; 
while (proceso) { 

nick = prompt ('Introduzca un nombre:'); 
if (nick) { 

nicks += nick + ' '; II Agrega el nuevo nombre y un espacio 
despues 
} else { 

proceso = false / / No ha sido inscrito, por lo que hace 
invalidar la condicion 

} 

} 

alert (nicks) / / Muestra los nombres 

La variables proceso es la que se llama variable de control o variable de bucle. Esta es una 
variable que no participa directamente en la instruction del bucle solo sirve para verificar 
la condicion. Cada iteracion del bucle, solicita un nombre y se guarda temporalmente en la 
variable nick. A continuation, realiza una nick prueba para ver si contiene algo, y en este caso, 
se suman los nicks prenoma variables. Recuerda que se anade un espacio para separar los 
nombres. Si, por el contrario nick contiene null - lo que significa que el usuario no ha introducido 
un nombre o ha pulsado en cancelar, se cambia el valor de proceso a false, que invalida la 
condicion, y evitara que la iteracion de bucle se repita. 

Algunas mejoras 

Uso de break 

En los nombres del ejemplo dado, se utiliza una variable de bucle con el fin de detener el bucle. 
Sin embargo, hay una palabra clave para detener el ciclo de una vez. Esta palabra clave es 
break y se utiliza exactamente como en la estructura condicional switch, vista en el capitulo 


Desarrollo de Aplicaciones web. Rafael Menendez-Barzanallana Asensio. UMU 



JavaScript (1) 43 de 46 


anterior. Si tomamos un ejemplo, esto es lo que sucede con un break:: 
Codigo: JavaScript 


var = nicks = 'nick; 
while (true) { 

nick = prompt ('Introduzca un nombre:'); 
if (nick) { 

nicks += nick + ' II Agrega el nuevo nombre y un 
espacio despues 
} else { 

break; / / Salirdel bucle 

} 

} 

alert (nicks) / / Muestra los nombres 

Uso de continue. Esta declaracion es mas rara, porque las oportunidades de uso no son 
habituales, continue es algo parecida a break, puede poner fin a una iteracion, pero atencion, 
no provoca el fin del bucle, se detiene la iteracion actual y pasa a la siguiente. 

Do while 

Este bucle se asemeja mucho al bucle while, excepto que en este caso el bucle se ejecuta 
siempre por lo menos una vez. En el caso de un bucle while, si la condicion no es valida, el 
bucle no es ejecutado Con do while, el bucle se ejecuta una vez, entonces la condicion se 
comprueba para determinar si el bucle debe continuar. La sintaxis de un bucle do while es: 

Codigo: JavaScript 


do { 

sentencia_1; 
sentencia_2; 
sentencia_3; 

} while (condicion); 

Hay una diferencia fundamental de escritura respecto al bucle while, que puede hacer ver la 
diferencia entre ambos. Sin embargo, el uso de do while no es muy comun, y es muy posible 
que no tengas nunca que usarlo porque los programadores suelen emplear un bucle while 
normal con una condicion que hace que siempre se ejecute una vez. Atencion a la sintaxis del 
ciclo do while: hay un punto y coma despues del parentesis de cierre de while. 

Bucle for 
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El bucle for se ve en su aplicacion como parecido al bucle while, pero su arquitectura parece 
complicado al principio. El bucle for es un bucle que funciona de forma bastante simple, pero 
muy compleja para los principiantes debido a su sintaxis. Una vez que el bucle esta controlado, 
es muy probable que se utilice muy a menudo. El diagrama de un bucle for es: 

Codigo: JavaScript 

for (inicio; condicion, incremento) { 

sentencia_1; 

sentencia_2; 

sentencia_3; 

} 

En los parentesis del bucle ya no se encuentra la condicion, sino tres bloques: inicio, condicion 
e incremento. Estos tres bloques estan separados por un punto y coma, que es un poco como 
si los parentesis contuvieran tres instrucciones distintas. 

El bucle por lo tanto tiene tres bloques que lo definen. El tercer bloque es el incremento que 
se utiliza para el incremento de una variable en cada iteracion del bucle. Por lo tanto, el bucle 
es util para contar y para repetir el bucle un numero determinado de veces. En el siguiente 
ejemplo, vamos a mostrar cinco veces un cuadro de dialogo con alert (), que muestra el numero 
de cada 
iteracion: 

Codigo: JavaScript 


for (var iter = 0; iter <5; iter++) { 
alert ('N°. Iteracion' + iter); 

} 

En el primer bloque de inicializacion, inicializamos una variable llamada iter que vale 0, la 
palabra clave var se requiere, como cualquier inicializacion. Se define en la condicion de que 
el bucle continua mientras que iter es estrictamente menor que 5. Por ultimo, en el bloque de 
incremento, se indica que iterse incrementara en cada iteracion completa. 

Pero me muestra "Iteracion n 0 4" al final, ^no hay ninguna iteracion 5? Es bastante normal por 
dos razones: la primera que el bucle parte de 0, asi que si contamos desde 0 a 4, hay 5 
Velocidad: 0, 1, 2, 3 y 4. La otra, el incremento no tiene lugar antes de cada iteracion, sino al 
final de cada iteracion. Por lo tanto, la primera vuelta se hace con iter que es 0, antes de ser 
incrementado. 

Volviendo a nuestro ejemplo 
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Con los puntos de la teoria que acabamos de ver, podemos volver a escribir nuestro ejemplo 
de los nombres empleando un bucle for, evitando contar en cada etapa: 

Codigo: JavaScript 

for (var nicks = 'nick; true;) { 

nick = prompt ('Introduzca un nombre:'); 

if (nick) { 

nicks += nick + ''; 


} else { 

break; 

} 

} 

alert (nicks); 

En el bloque de inicializacion (en primer lugar), se comienza inicializando nuestras dos 
variables. A continuacion viene el bloque con la condicion (la segunda), que es simplemente 
true. Se termina con el bloque de incremento .. y no es necesario mas aqui, ya que no hay 
necesidad de incrementar. El tercer bloque esta vacio, pero existe. Es por esto por lo que 
todavia debe poner el punto y coma despues del segundo bloque (condicion) 

Ahora, se va a modificar el bucle para contar cuantos nombres han sido registrados. Para ello, 
vamos a crear una variable de bucle llamada i, que se incrementa a cada paso del bucle. 

Codigo: JavaScript 

for (var i = 0, nicks = 'nick; true; i++) { 

nick = prompt ('Introduzca un nombre:'); 
if (nick) { 

nick nick + + ="; 

} else { 

break; 

} 

} 

alert('Hay ' + i + ' nombres :\n\n' + nicks); 

La variable de bucle se ha ahadido en el bloque de inicio. El bloque de incremento tambien se 
ha modificado: se indica que hay que incrementar la variable de bucle i. Asi, en cada iteracion 
del bucle, se incrementa i, lo que nos permitira contar el numero de nombres agregados. 

Alcance de las variables del bucle 
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En Javascript, no se deben declarar las variables dentro de un bucle (entre Haves), en aras de 
las prestaciones (velocidad) y la logica: en efecto, hay no hay necesidad de declarar la misma 
variable cada vez en el bucle. Es aconsejable declarar las variables directamente en el bloque 
de inicializacion, como se muestra en los ejemplos Pero cuidado: Una vez que se ejecuta el 
bucle, la variable sigue existiendo, lo que explica que el ejemplo anterior se pueda recuperar 
el valor de i despues que el bucle se completa. Este comportamiento es diferente del de otros 
lenguajes, en los que una variable declarada en un bucle es "destruida" despues de que el 
bucle se ejecuta. 

Prioridad de ejecucion 

Los tres bloques que forman el bucle for no se ejecutan al mismo tiempo: 

• Inicio: justo antes de que comience el bucle. Es como si las instrucciones fueron 
escritas justo antes del bucle, un poco como un bucle while; 

• Condicion: antes de cada iteracion del bucle, al igual que la condicion de un bucle while; 

• Incremento: despues de cada ciclo. Esto significa que si ejecutas un break en un bucle 
for, el paso en el bucle a partir de break no sera contabilizado. 

El bucle for es muy utilizado en Javascript, y no el bucle while, a diferencia de otros lenguajes 
de 

programacion. Como veremos mas adelante, el funcionamiento real de JavaScript hace que 
sea necesario en la mayoria de los casos, como la manipulacion tablas y de objetos. Se vera 
mas adelante. Tambien hay una variante del bucle llamada for in que solo se utiliza en casos 
especificos. 

Resumen 

• El incremento es importante dentro de los bucles. Incrementar o decrementar significa la 
adicion o sustraccion de una unidad a la variable. El comportamiento de un operador de 
incremento es diferente si se situa antes o despues de la variable. 

• El bucle while permite repetir una lista de instrucciones mientras la condicion sea 
verdadera. 

• El ciclo do while es una variante de while, que que sera ejecutado al menos una vez, 
independientemente de la condicion. 

• El bucle for es un bucle para repetir una lista de instrucciones un numero dado de 
veces. Esta es una variante muy especifica del bucle while. 
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